<template>
    <div class="member_page">
      <el-row style="padding:10px">
        <el-button type="warning" @click="handleAdd">请假申请</el-button>
      </el-row>
        <Table
          :need-operation-area="true"
          :pSize="pageSize"
          :tPage="total"
          :table-model="tableModel"
          :table-data="tableData"
          :currentPage="currentPage"
          :needRemove="false"
          :needEdit="true"
          tableEditText="处理申请"
          @edit="handleEdit"
          @changePage="handleChangePage"
          @handleSizeChange="handleSizeChange"
        />
    </div>
</template>
<script>
import Table from '@/components/table.vue'
import {getWorkList,toApplyWork,agreeApplyWork}  from '@/api'
export default {
  name:'memberList',
    components:{
        Table
    },
    data(){
        return{
          dialogTableVisible:false,
          tableModel: [
          { attribute: 'workerName', dontSort: true, type: 'normal', title: '工作人员姓名' },
          { attribute: 'datetime', dontSort: true, type: 'normal', title: '记录日期' },
          { attribute: 'typeName', dontSort: true, type: 'normal', title: '考勤情况' }
        ],
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,
        userinfo:{}
        }
    },
    created(){
      this.initTableData()
    },
    methods:{
      handleAdd(){
        this.$confirm('今天确定请假?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const userinfo = JSON.parse(localStorage.getItem('userinfo'))
         toApplyWork({id:userinfo.id}).then(res=>{
              if(res.code==200){
                this.$message({
                  type: 'success',
                  message: '申请中。。。'
                });
                this.initTableData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      handleEdit(row){
        if(row.type!=3){
          this.$message.error('不是请假申请，不可处理!')
          return false
        }
        this.$confirm('是否同意请假?', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         agreeApplyWork({id:row.id}).then(res=>{
              if(res.code==200){
                this.$message({
                  type: 'success',
                  message: '处理完成！'
                });
                this.initTableData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
        initTableData(){
          getWorkList(this.currentPage).then(res=>{
            // console.log(res)
            if(res.code==200&&res.data){
              this.tableData=res.data
              this.total=res.masg
            }
          })
        },
        // 当前页
      handleChangePage(page) {
        this.currentPage = page
        this.initTableData()
      },
      // 每页显示多少
      handleSizeChange(limit) {
        this.pageSize = limit
        this.initTableData()
      }
    }
}
</script>
<style lang="less">
.member_page{
  padding: 10px;
  .user_box{
      width: 100%;
      .item{
          width: 100%;
          height: 50px;
          box-sizing: border-box;
          display: flex;
          border-bottom: 1px dashed #efefef;
          .label{
              width: 30%;
              line-height: 50px;
          }
          .value{
              width: 70%;
              line-height: 50px;
              text-align: right;
          }
      }
  }
}
  
</style>